<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap-复选框（Checkbox）和单选框（Radio）系列</title>

    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <link rel="stylesheet" href="../css/bootstrap-theme.css"/>
</head>
<body>
<label>默认的复选框和单选按钮的实例</label>
<form>
    <h4>第一种</h4>
    <div class="form-group">
        <div class="checkbox-inline">
            <label>爱好</label>
        </div>
        <div class="checkbox-inline">
            <label><input name="checkbox" type="checkbox" >足球</label>
        </div>
        <div class="checkbox-inline">
            <label><input name="checkbox" type="checkbox" >篮球</label>
        </div>
        <div class="checkbox-inline">
            <label><input name="checkbox" type="checkbox" >电动</label>
        </div>
        <div class="checkbox-inline">
            <label><input name="checkbox" type="checkbox" >敲代码</label>
        </div>
    </div>
    <h4>第二种</h4>
    <div class="form-group">
        <div class="checkbox">
            <label>
                <input type="checkbox">足球
            </label>
            <label>
                <input type="checkbox">篮球
            </label>

        </div>
    </div>
    <hr/>
    <h4>radio</h4>
    <h4>第一种</h4>
    <div class="form-group">
        <div class="radio">
            <label><input name="sex" type="radio">男</label>
            <label><input name="sex" type="radio">女</label>
        </div>

    </div>
    <h4>第二种</h4>
    <div class="form-group">
        <div class="radio-inline">
            <label><input name="sex" type="radio">男</label>
        </div>
        <div class="radio-inline">
            <label><input name="sex" type="radio">女</label>
        </div>
    </div>
</form>
</body>
</html>